<template>
<div>
    <h2 class="sub-header">更新学生信息</h2>
    <form @submit.prevent="update">
        <div class="form-group">
            <label for="name">姓名</label>
            <input v-model="formData.name" type="text" required class="form-control" placeholder="姓名">
        </div>
        <div class="form-group">
            <label for="age">年龄</label>
            <input v-model.number="formData.age" type="number" required class="form-control" name="age" id="age" placeholder="年龄">
        </div>
        <button type="submit" class="btn btn-default">保存</button>
    </form>
</div>
</template>

<script>
import axios from 'axios'

export default {
	data () {
		return {
            formData : {
                name : '',
                age : ''
            }
        }
	},
    async created () {
        // 解构赋值
        const {id} = this.$route.query
        const {data} = await axios.get(`http://localhost:3000/list/${id}`)
        this.formData = data
    },
    methods : {
        async update () {
            // 1.注册表单提交事件及处理函数
            // 2.配置表单验证
            // 3.收集表单数据
            // 4.提交表单，发起请求，添加学生
            // 5.添加成功，跳转到列表页
            //   编程式导航
            const res = await axios.patch(`http://localhost:3000/list/${this.formData.id}`, this.formData)
            // this.$router.back()
            console.log(res)
            this.$router.push('/crud')
        }
    }
}
</script>

<style>
	
</style>
